<template>
	<view class="content">
		<view class="stateBox">
			<image :src="baseUrl+'img/my/4.png'" class="icon"></image>
			<text class="label">待付款</text>
		</view>
		<view class="line">
		</view>
		<view class="infoBox">
			<view class="item">
				<text>订单编号：</text>
				<text>{{data.code}}</text>
			</view>
			<view class="item">
				<text>订单类型：</text>
				<text>{{data.serve_name}}</text>
			</view>
			<view class="item">
				<text>数量：</text>
				<text>{{data.num}}</text>
			</view>
			<view class="item">
				<text>下单时间：</text>
				<text>{{data.created_at}}</text>
			</view>
			<view class="item">
				<text>上门时间：</text>
				<text>{{data.service_data}}/{{data.service_time}}</text>
			</view>
			<view class="item">
				<text>服务地址：</text>
				<text>{{user.floor_house_num}}</text>
			</view>
			<view class="item">
				<text>实付款：</text>
				<text>{{data.amount}}</text>
			</view>
			<view class="item">
				<text>备注：</text>
				<text>{{data.remark || ''}}</text>
			</view>
		</view>
		<view class="line">
		</view>
		<view class="pay" @click="pay" v-if="admin==1">
			立即付款
		</view>
		<view class="pay" @click="modify" v-if="admin==2">
			修改进度
		</view>
		<view class="cancel" @click="cancel">
			取消订单
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				state: false,
				baseUrl: this.$baseUrl,
				id: '',
				cat_id: '',
				data: '',
				user: '',
				admin:0
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.admin = options.admin;
			this.cat_id = options.cat_id;
			this.$request.get(`orderRead?id=${this.id}`).then(res => {
				this.data = res.data.data;
			})
			this.$request.get('center').then(res => {
				this.user = res.data.data;
			})
		},
		methods: {
			pay() {
				this.$request.post(`unified_order`, {
					id: this.id,
					type: 1,
					pay_status:2
				}).then(res => {
					console.log(res);
					if (res.data.code == 10000) {
						//调用支付
						wx.requestPayment({
							timeStamp: res.data.data.timeStamp.toString(),
							nonceStr: res.data.data.nonceStr,
							package: res.data.data.package,
							signType: res.data.data.signType,
							paySign: res.data.data.paySign,
							success: (res) => {
								// 支付成功处理逻辑
							},
							fail: (res) => {
								this.$toast('支付失败');
							}
						});

					}else{
						this.$toast(res.data.message);
					}
				})
			},
			//取消
			cancel() {
				uni.showModal({
					title: '提示',
					content: '是否确认取消该订单',
					success: (res) => {
						if (res.confirm) {
							this.$request.get(`cancelOrder?id=${this.id}&type=cancel`).then(res => {
								if (res.data.code == 10000) { // 更新购物车
									this.$toast('取消成功');
									setTimeout(() => {
										uni.navigateBack({
											delta: 1,
										})
									}, 1000)
								} else {
									this.$toast('取消失败');
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
		},
	}
</script>

<style lang="scss" scoped>
	.pay {
		width: 670rpx;
		height: 90rpx;
		border-radius: 6rpx;
		background: #121212;
		font-weight: 500;
		font-size: 26rpx;
		color: #FFFFFF;
		letter-spacing: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 165rpx;
		margin-left: 40rpx;
	}

	.cancel {
		width: 670rpx;
		height: 90rpx;
		border-radius: 6rpx;
		font-weight: 500;
		font-size: 26rpx;
		color: #121212;
		letter-spacing: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 30rpx;
		margin-left: 40rpx;
		border: 1rpx solid #121212;
		box-sizing: border-box;
		/* 关键属性 */
	}

	.infoBox {
		margin-top: 95rpx;

		.item {
			padding-left: 40rpx;
			padding-right: 40rpx;
			font-weight: 500;
			font-size: 24rpx;
			color: #121212;
			letter-spacing: 5rpx;
			display: flex;
			justify-content: space-between;
			margin-bottom: 40rpx;
		}
	}

	.line {
		width: 670rpx;
		height: 1rpx;
		background: #010101;
		margin-top: 80rpx;
		margin-left: 40rpx;
	}

	.stateBox {
		display: flex;
		margin-top: 100rpx;
		align-items: center;

		.label {
			font-weight: 700;
			font-size: 32rpx;
			color: #121212;
			letter-spacing: 6rpx;
			margin-left: 18rpx;
		}

		.icon {
			width: 64rpx;
			height: 64rpx;
			margin-left: 278rpx;
		}
	}

	.content {
		width: 100%;
		height: 100vh;
	}
</style>